<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="my" uri="/mytags" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>在校学生信息</title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/asserts/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
	
		<!-- js插件 -->
		<script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
		<script src="${pageContext.request.contextPath}/asserts/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/asserts/bootstrapValidate/css/bootstrapValidator.min.css"/>
 	   <script src="${pageContext.request.contextPath}/asserts/bootstrapValidate/js/bootstrapValidator.min.js"></script>
	 <style type="text/css">
			button{
 				height:30px;
 			}
 			.btn{
 				height:30px;
 				padding:2px;
 			}
 			.panel-body{
 				padding:2px;
 			}
 		 
		</style>
	</head>
	<body>
			<!-- 内容展示区 -->
			<div >
					<!-- 导航 -->
					<ol class="breadcrumb">
						<li><i class="fa fa-comment"></i> 在校学生管理</li>
					</ol>
					<div class="container-fluid">
						<!-- 	内容面板 -->
						<div class="panel panel-default">
							<!-- 控制按钮 -->
							<div class="panel-heading">
									<div class="btn-group">
										<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal"><span class="glyphicon glyphicon-pencil"></span>添加</button>
										<button class="btn btn-success"  data-toggle="modal" data-target="#mymodalimport"><span class="glyphicon glyphicon-import"></span>导入excel</button>
								    	<button class="btn btn-info" onclick="downTemplate()"><span class="glyphicon glyphicon-export"></span>导出excel模板</button>
										<button class="btn btn-danger" onclick="removeAll()"><span class="glyphicon glyphicon-remove"></span>批量删除</button>
										
									</div>
							</div><!-- 控制按钮  end-->
							<div class="panel-body">
								<form action="${pageContext.request.contextPath}/student/list" method="post"  class="form-horizontal" >
								     <div class="form-group">
										<label class="control-label col-md-2">学生姓名：</label>
										<div class="col-md-3">
											<input type="text" name="name" value="${name}" placeholder="输入学生姓名" class="form-control"  />
										
										</div>
										<label class="control-label col-md-2">身份证号：</label>
										<div class="col-md-3">
											<input type="text" name="idcard" value="${idcard}" placeholder="输入身份证号码" class="form-control"  />
										
										</div>
										<div class="col-md-2">
												<button class="btn btn-success">查询</button>
										</div>
									</div>
									 <div class="form-group">
									  	 <label class="control-label col-md-2">所属乡镇：</label>
											<div class="col-md-3">
												 		  <select id="zid" name="zid" class="form-control" onchange="changeZhen(this)">
															<option value="">请选择</option>
															<c:forEach var="xz" items="${xzList}">
																<option value="${xz.id}" <c:if test="${xz.id==zid}">selected="selected"</c:if>>${xz.name}</option>
															</c:forEach>
														</select>
											</div>
										<label class="control-label col-md-2">所属学校(先选择乡镇)：</label>
										<div class="col-md-3">
											 <select id="schid" name="schid" class="form-control">
												<option value="">请选择</option>
												<c:forEach var="school" items="${schoolListByZid}">
										 		<option value="${school.schid}" <c:if test="${school.schid==schid}">selected="selected"</c:if>>${school.name}(${school.level})</option>
										 		
										 	</c:forEach>
											</select> 
										</div>
										
									</div>
									 
									 
										<%-- <label class="control-label col-md-2">所在学校：</label>
										<div class="col-md-3">
											 <select name="schid" class="form-control">
											<option value="">请选择</option>
										 	<c:forEach var="school" items="${schoolList}">
										 		<option value="${school.schid}" <c:if test="${school.schid==schid}">selected="selected"</c:if>>${school.name}(${school.level})</option>
										 		
										 	</c:forEach>
										</select> 
										</div>
									 </div> --%>
									 
									 
								</form>
								
								<table class="table table-bordered table-striped table-condensed table-hover">
									<tr class="success">
										<th width="2%"><input type="checkbox" id="selectAll" onclick="checkAlls(this)" /></th>
										<th width="2%">序号</th>
										<th style="display:none" width="3%">ID</th>
										<th width="6%">姓名</th>
										<th width="10%">身份证号</th>
										<th width="10%">学籍号</th>
										<th width="11%">学期</th>
										<th width="5%">年级</th>
										<th width="5%">班级</th>
										<th width="7%">是否寄宿</th>
										<th width="18%">所属学校</th>
										<th width="4%">学段</th>
										<th width="12%">操作</th>
									</tr>
									<!-- 数据绑定 -->
									<c:forEach items="${pageInfo.list}" var="stu" varStatus="vs">
									<tr>
										<td><input type="checkbox" name="checkId" value="${stu.id}" /></td>
										<td width="4%" style="text-align:center" >${(pageInfo.pageNum-1)*20+vs.count}</td>
										<td  style="display:none"  width="3%">${stu.id}</td>
										<td width="6%">${stu.name }</td>
										<td width="10%">${stu.idcard }</td>
										<td width="10%">${stu.stucode }</td>
										<td width="5%">${stu.term }</td>
										<td width="5%">${stu.level }</td>
										<td width="5%">${stu.classes }</td>
										<td width="5%">${stu.islodge }</td>
										<td width="15%">${stu.school.name }</td>
										<td width="6%">${stu.school.level }</td>
										<td>
											<button type="button" class="btn btn-primary" 
												data-toggle="modal" data-target="#mymodalupdate" onclick="update(this)" >
												 <span class="glyphicon glyphicon-edit"></span> 修改</button>
											 <button type="button" class="btn btn-danger"  onclick="del(${stu.id})"> 
											 	<span class="glyphicon glyphicon-remove"></span> 删除</button>
										</td>
									</tr>
											
									</c:forEach> 
										
									<!-- 	数据绑定 end -->
								</table>
								<!-- 	分页 -->
								 <my:page prePage="${pageInfo.prePage}" nextPage="${pageInfo.nextPage}"   url="${pageContext.request.contextPath}/student/list?n=1&x=1" totalPage="${pageInfo.pages}"
								  currentPage="${pageInfo.pageNum}"/>
							</div>
						</div><!-- 内容面板 end -->
					</div>
			</div><!-- 	内容展示区 end-->
	 
		
		<!-- 弹层组件 添加标签 -->
		<div class="modal fade" id="mymodal">
			<div class="modal-dialog">
				<div class="modal-content">
					<form  action="${pageContext.request.contextPath}/student/add"  class="form-horizontal">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
							<h4 class="modal-title" id="mylabel">录入在校学生信息</h4>
						</div>
						<div class="modal-body">
							  
							  <!-- 学校-->
								<div class="form-group">
									<label class="control-label col-md-3">姓名：</label>
									<div class="col-md-8">
										<input type="text" name="name" placeholder="请输入姓名" class="form-control"  />
									</div>
								</div>
								  <!-- 学校-->
								<div class="form-group">
									<label class="control-label col-md-3">身份证号：</label>
									<div class="col-md-8">
										<input type="text" name="idcard" placeholder="请输入身份证号" class="form-control"  />
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">学籍号：</label>
									<div class="col-md-8">
										 	<input type="text" name="stucode" placeholder="请输入学籍号" class="form-control"  />
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">学期：</label>
									<div class="col-md-8">
 											<select  name="term" class="form-control">
													<option value="">请选择</option>
													<option value="2019年秋季学期">2019年秋季学期</option>
													<option value="2020年春季学期">2020年春季学期</option>
													<option value="2020年秋季学期">2020年秋季学期</option>
													<option value="2021年春季学期">2021年春季学期</option>
													<option value="2021年秋季学期">2021年秋季学期</option>
													<option value="2022年春季学期">2022年春季学期</option>
													<option value="2022年秋季学期">2022年秋季学期</option>
													<option value="2023年春季学期">2023年春季学期</option>
												</select> 
									
									</div>
								</div>
							  	<div class="form-group">
									<label class="control-label col-md-3">年级：</label>
									<div class="col-md-8">
										<input type="text" name="level" placeholder="请输入年级（如三年级）" class="form-control"  />
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">班级：</label>
									<div class="col-md-8">
										<input type="text" name="classes" placeholder="请输入班级（如一班）" class="form-control"  />
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">是否寄宿：</label>
									<div class="col-md-8">
										<select name="islodge" class="form-control">
											<option value="">请选择</option>
											<option value="是">是</option>
											<option value="否">否</option>
										</select> 
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">所属学校：</label>
									<div class="col-md-8">
									 <select name="schid" class="form-control">
											<option value="">请选择</option>
										 	<c:forEach var="school" items="${schoolList}">
										 			<option value="${school.schid}" <c:if test="${school.schid==schid}">selected="selected"</c:if>>${school.name}(${school.level})</option>
										 	</c:forEach>
										</select> 
									</div>
								</div>
							 
						</div>
						<div class="modal-footer">
							<button class="btn btn-danger"  data-dismiss="modal" type="button">关闭</button>
							<button class="btn btn-primary" type="submit">录入</button>
						</div>
					</form>
				</div>
			</div>
		</div><!-- 弹层组件 添加标签 end -->
		
			<div class="modal fade" id="mymodalupdate">
			<div class="modal-dialog">
				<div class="modal-content">
					<form action="${pageContext.request.contextPath}/student/update"  class="form-horizontal">
					    <input type="hidden" id="id" name="id" value=""/>
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
							<h4 class="modal-title" id="mylabel">修改在校学生信息</h4>
						</div>
						<div class="modal-body">
							  
							  <!-- 学校-->
								<div class="form-group">
									<label class="control-label col-md-3">姓名：</label>
									<div class="col-md-8">
										<input type="text" id="name" name="name" placeholder="请输入姓名" class="form-control"  />
									</div>
								</div>
								  <!-- 学校-->
								<div class="form-group">
									<label class="control-label col-md-3">身份证号：</label>
									<div class="col-md-8">
										<input type="text" id="idcard" name="idcard" placeholder="请输入身份证号" class="form-control"  />
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">学籍号：</label>
									<div class="col-md-8">
										 	<input type="text" id="stucode" name="stucode" placeholder="请输入学籍号" class="form-control"  />
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">学期：</label>
									<div class="col-md-8">
 											<select  name="term" class="form-control">
													<option value="">请选择</option>
													<option value="2019年秋季学期">2019年秋季学期</option>
													<option value="2020年春季学期">2020年春季学期</option>
													<option value="2020年秋季学期">2020年秋季学期</option>
													<option value="2021年春季学期">2021年春季学期</option>
													<option value="2021年秋季学期">2021年秋季学期</option>
													<option value="2022年春季学期">2022年春季学期</option>
													<option value="2022年秋季学期">2022年秋季学期</option>
													<option value="2023年春季学期">2023年春季学期</option>
												</select> 
									
									
									</div>
								</div>
							  	<div class="form-group">
									<label class="control-label col-md-3">年级：</label>
									<div class="col-md-8">
										<input type="text" id="level" name="level" placeholder="请输入年级（如三年级）" class="form-control"  />
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">班级：</label>
									<div class="col-md-8">
										<input type="text" id="classes" name="classes" placeholder="请输入班级（如一班）" class="form-control"  />
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">是否寄宿：</label>
									<div class="col-md-8">
										<select name="islodge" class="form-control">
											<option value="">请选择</option>
											<option value="是">是</option>
											<option value="否">否</option>
										</select> 
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">所属学校：</label>
									<div class="col-md-8">
									 <select name="schid" class="form-control">
											<option value="">请选择</option>
										 	<c:forEach var="school" items="${schoolList}">
										 		<option value="${school.schid}">${school.name}</option>
										 	</c:forEach>
										</select> 
									</div>
								</div>
							 
						</div>
						<div class="modal-footer">
							<button class="btn btn-danger"  data-dismiss="modal" type="button">关闭</button>
							<button class="btn btn-primary" type="submit">修改</button>
						</div>
					</form>
				</div>
			</div>
		</div><!-- 弹层组件 添加标签 end -->
	 
	 	
		<div class="modal fade" id="mymodalimport">
			<div class="modal-dialog">
				<div class="modal-content">
					<form action="${pageContext.request.contextPath}/student/importBetch"
					method="post" enctype="multipart/form-data"  class="form-horizontal">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
							<h4 class="modal-title" id="mylabel">导入在校学生</h4>
 						</div>
						<div class="modal-body">
							   
							  <!-- 学校-->
								<div class="form-group">
									<label class="control-label col-md-3">选择导入的文件（excel格式）：</label>
									<div class="col-md-8">
									    <input type="file"  name="file" class="form-control"  />
									</div>
								</div>
								  <!-- 学校-->
							 
						</div>
						<div class="modal-footer">
							<button class="btn btn-danger" data-dismiss="modal" type="button">关闭</button>
							<button class="btn btn-primary" type="submit" >导入</button>
						</div>
					</form>
				</div>
			</div>
		</div><!-- 弹层组件 添加标签 end -->
	 
	</body>
</html>
<script>
function changeZhen(obj){
	 //ajax   根据镇id 查询 它学校表中的 数据 
	 
	if(obj.value!=''){
		  $.ajax({
				url : '../school/getSchoolByZid?zid='+obj.value,
				type : "get",
				dataType : "json",
				success : function(data) {
					 
					if(data!=null){
						$("#schid option:gt(0)").remove();
						for(var i=0;i<data.length;i++){
							var opt = "<option value='"+data[i].schid+"'>"+data[i].name+"("+data[i].level+")</optoin>";
							$("#schid").append(opt);
						}
					} 
				},
				error : function(xhr) {
					alert(xhr.status);
				}
			});
	}else{
		//
		$("#schid option:gt(0)").remove();
	}	
}

	 $(function () {
		 
		 var flag  ='${successFlag}';
		 if(flag=='true'){
			 alert('操作成功！ ');
		 }
      /*    $.ajax({
				url : '../datatotal/getAllZhen',
				type : "get",
				dataType : "json",
				success : function(data) {
					 
					$("#zid option:gt(0)").remove();
					for(var i=0;i<data.length;i++){
						var opt = "<option value='"+data[i].id+"'>"+data[i].name+"</optoin>";
						$("#zid").append(opt);
					}
				},
				error : function(xhr) {
					alert(xhr);
				}
			});
		  */
		 
	  
        $('form:gt(0)').bootstrapValidator({
　　　　　　　　message: 'This value is not valid',
            　feedbackIcons: {
                　　　　　　　　valid: 'glyphicon glyphicon-ok',
                　　　　　　　　invalid: 'glyphicon glyphicon-remove',
                　　　　　　　　validating: 'glyphicon glyphicon-refresh'
            　　　　　　　　   },
            fields: {
                name: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '姓名不能为空'
                        }
                    }
                },
                idcard: {
                    validators: {
                        notEmpty: {
                            message: '身份证号不能为空'
                        },
                        stringLength: {
                            min: 18,
                            max: 18,
                            message: '身份证号长度必须是18位'
                        }
                    }
                },
                stucode: {
                    validators: {
                        notEmpty: {
                            message: '学籍号不能为空'
                        }
                    }
                },
                term: {
                    validators: {
                        notEmpty: {
                            message: '学期不能为空'
                        }
                    }
                },
                level: {
                    validators: {
                        notEmpty: {
                            message: '年级不能为空'
                        }
                    }
                },
                classes: {
                    validators: {
                        notEmpty: {
                            message: '班级不能为空'
                        }
                    }
                },schid: {
                    validators: {
                        notEmpty: {
                            message: '学校不能为空'
                        }
                    }
                }
            } ,
            submitHandler: function (validator, form, submitButton) {
              // alert("submit");
            }
        });
    });
	 

     function del(id){
  	  var flag =  confirm("确认是否删除？");
  	   if(flag){
  		   var path  ='${pageContext.request.contextPath}';
  		   //alert(id);
  		    location.href= path+"/student/delete?id="+id;
  	   }
     }
     
     function update(obj){/*点击修改按钮，给模态框加载信息并且弹出模态框*/
         var tds= $(obj).parent().parent().find('td');
          $("#id").val(tds.eq(2).text());
  		  $("#name").val(tds.eq(3).text());
  		  $("#idcard").val(tds.eq(4).text());
  		  $("#stucode").val(tds.eq(5).text());
  		  $("#term").val(tds.eq(6).text());
  		  $("#level").val(tds.eq(7).text());
  		 $("#classes").val(tds.eq(8).text());
 		  
  	   }
	
     function downTemplate(){
  	   location.href="downTemplate";
     }
     
	  document.documentElement.style.overflowY = 'hidden';
	  
	 //批量删除 
	  function removeAll(){
		 var ids="";
			var checkId= document.getElementsByName("checkId");
			 for(var i=0;i<checkId.length;i++){
				 if(checkId[i].checked==true){
					 ids+=checkId[i].value+",";
				 }
			 }
			 
		    ids=ids.substring(0,ids.length-1);
		    var flag =  confirm("确认是否批量删除，请再次核实数据？");
		  	   if(flag){
		  		   var path  ='${pageContext.request.contextPath}';
		  		   //alert(id);
		  		  //  alert(ids);
		  		    location.href= path+"/student/deleteBatch?ids="+ids;
		  	   }
	  }
	 
	 function checkAlls(obj){
		 var c = obj.checked;
		var checkId= document.getElementsByName("checkId");
		 for(var i=0;i<checkId.length;i++){
			 
			 checkId[i].checked=c;
		 }
		 
	 }
</script>